import {
  registerMicroApps,
  start,
  initGlobalState,
  MicroAppStateActions,
} from "qiankun";
import * as TYPES from "./microApp.d";

// actions.setGlobalState(state);

export const useQiankun = (options: any = {}) => {
  const state: TYPES.IState = {
    msg: "这儿是传空点击开发",
  };
  // 初始化 state
  const actions: MicroAppStateActions = initGlobalState(state);
  
  actions.onGlobalStateChange((newState, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(newState, prev);
  });
  const apps = [
    {
      name: "home", // 必选，微应用的名称，微应用之间必须确保唯一
      entry: "http://localhost:8080/", // - 必选，微应用的入口
      container: "#microApp", // -必选，微应用的容器节点的选择器或者 Element 实例
      activeRule: "/editor", // - 必选，微应用的激活规则
      props: {
        registerModules: async () => {
          
        }
      },
    },
  ];

  registerMicroApps(apps, {
    beforeLoad: [
      (app) => {
        console.log(`${app.name}的beforeLoad阶段`);
      },
    ],
    beforeMount: [
      (app) => {
        console.log(`${app.name}的beforeMount阶段`);
      },
    ],
    afterMount: [
      (app) => {
        console.log(`${app.name}的afterMount阶段`);
      },
    ],
    beforeUnmount: [
      (app) => {
        console.log(`${app.name}的beforeUnmount阶段`);
      },
    ],
    afterUnmount: [
      (app) => {
        console.log(`${app.name}的afterUnmount阶段`);
      },
    ],
  });

  start({ experimentalStyleIsolation: true, prefetch: "all" });
  return {
    state,
    actions,
  }
};
